<template>
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="waybill_number"
            label="发货单号"
            width="150">
            </el-table-column>
            <el-table-column
            fixed
            prop="equipment_id"
            label="设备ID"
            width="150">
            </el-table-column>
            <el-table-column
            fixed
            prop="goods_name"
            label="货物类型"
            width="250">
            </el-table-column>
            <el-table-column
            fixed
            prop="safe_temperature"
            label="安全温度(°C)"
            width="120">
            </el-table-column>
            <el-table-column
            fixed
            prop="interval"
            label="记录间隔"
            width="120">
            </el-table-column>
            <el-table-column
            fixed
            prop="startup_delay"
            label="启动延时"
            width="120">
            </el-table-column>
            <el-table-column
            fixed
            prop="start_time"
            label="开始时间"
            width="250">
            </el-table-column>
            <el-table-column
            fixed
            prop="end_time"
            label="结束时间"
            width="250">
            </el-table-column>
            <el-table-column
            fixed
            prop="waybill_type"
            label="运单状态"
            width="150" >
            <template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.waybill_type | is_ok }}</span>
					</template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            fixed
            prop="temperature_record"
            label="温度记录"
            width="150">
            <template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.temperature_record | is_alert }}</span>
					</template>
            </el-table-column>
            
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看详情</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
		</el-pagination>


    </div>
</template>



<script>
import { waybill_form_get} from '../../api/api.js'
export default {
    data(){
        return{
            //分页数据
            tableData: [],
            paginations:{
                page_index:1, //当前页
                total:0, //总数
                page_size:5, //一页显示多少
                page_sizes:[5,10,15,20], //每页显示多少条
                layout:'total, sizes, prev, pager, next, jumper'
            },
            // 所有数据
            allTableData: [],
        }
    },
    filters:{
        // 报警/正常           
        is_alert(type){
            if(type==0){
                return "正常"
            }else{
                return "报警"
            }
        },
        // 云途 / 完成
        is_ok(type){
            if(type==0){
                return "正在云途"
            }else{
                return "完成"
            }
        }   
    },
    mounted() {
        //运单信息请求
        this.get_waybill()
    },
    methods: {
        //获取运单信息
        get_waybill(){
            waybill_form_get().then(res=>{
                console.log(res)
                this.allTableData = res.data
                this.setPaginations()
            })
            
        },
        // 分页
         setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			},
        handleClick(row) {
            //跳转到详情页
            this.$router.push('/detailedwaybill?id=' + row)
            console.log(row);
        }
    },
}
</script>